<template>
  <div>
    <a-table
      :columns="ksColumns"
      :data-source="accountDataTable.totalDataList"
      :scroll="{ x: 1500 }"
      :pagination="{ pageSize: 5}"
    >
      <template slot="description" slot-scope="text">
        <div :style="{color: color ? '#fff' : '#0F69EB'}">
          <div
            style="maxHeight: 40px;
            overflowY: hidden;
            ">{{text || '--'}}</div>
        </div>
        <a-popover placement="right">
          <template slot="content">
            <div v-html="text" style="max-width: 400px"></div>
          </template>
          <div style="display: inline-block;marginTop: 15px; fontWeight: bold; cursor: pointer">详情</div>
        </a-popover>
      </template>
       <template slot="viewCount" slot-scope="text">
        <span>{{text | dataFormat}}</span>
      </template>
      <template slot="commentCount" slot-scope="text">
        <span>{{text | dataFormat}}</span>
      </template>
      <template slot="likeCount" slot-scope="text">
        <span>{{text | dataFormat}}</span>
      </template>
      <template slot="forwardCount" slot-scope="text">
        <span>{{text | dataFormat}}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
  export default {
    name: "KsTable",
    props: ['accountDataTable', 'color'],
    data() {
      return {
        ksColumns: [
          {
            title: '简介',
            dataIndex: 'description',
            scopedSlots: { customRender: 'description' },
            width: 250
          },
          {
            title: '播放量',
            dataIndex: 'viewCount',
            scopedSlots: { customRender: 'viewCount' },
            width: 150
          },
          {
            title: '评论数',
            dataIndex: 'commentCount',
            scopedSlots: { customRender: 'commentCount' },
            width: 150
          },
          {
            title: '点赞量',
            dataIndex: 'likeCount',
            scopedSlots: { customRender: 'likeCount' },
            width: 150
          },
          {
            title: '转发量',
            dataIndex: 'forwardCount',
            scopedSlots: { customRender: 'forwardCount' },
            width: 150
          }
        ],
        tableBg: '',
        tableColor: '',
        tableBorder: '',
        tableHover: '',
      }
    },
    created() {
      if (this.color) {
        this.tableBg = 'transparent';
        this.tableColor = '#fff';
        this.tableBorder = 'rgba(255, 255, 255, 0.1)';
        this.tableHover = 'transparent !important'
      } else {
        this.tableBg = '#F7F8FA';
        this.tableColor = '#999';
        this.tableBorder = '#F0F2F5';
        this.tableHover = '#e6f7ff';
      }
    },
    methods: {
    }
  }
</script>

<style scoped lang="less">
@tableBg: v-bind(tableBg);
@tableColor: v-bind(tableColor);
@tableBorder: v-bind(tableBorder);
@tableHover: v-bind(tableHover);

::v-deep .ant-table-tbody > tr:hover > td {
  background: transparent !important;
}
::v-deep .ant-table-thead > tr > th,::v-deep .ant-table-tbody > tr > td {
  text-align: center;
}
::v-deep .ant-table-thead > tr > th {
  background: @tableBg;
  color: @tableColor;
  font-size: 14px;
  border-bottom: 1px solid @tableBorder;
}
::v-deep .ant-table-tbody > tr > td{
  border-bottom: 1px solid @tableBorder;
  color: @tableColor;
}
</style>